<template>
  <el-card style="margin: 20px 0">


    <div style="top: 10px;position: relative;">
      <div style="float: left;">
        <el-button type="primary" @click="dialogNewVisible = true">新增</el-button>
      </div>
        <span style="float: right;font-size: 14px;"><i class="el-icon-info"></i> 提示：导航菜单设置过多可能会导致显示问题</span>

      <template>
        <el-table :data="tableData" style="width: 100%; top: 20px;" border :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }">

          <el-table-column label="名称" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="链接">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
          </el-table-column>
          <el-table-column label="显示顺序" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.showOrder }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="small" @click="openDialog(scope.row)" type="primary"  style="margin-right: 10px">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="deleteMenuBar(scope.row.id)">
                <el-button size="small" type="danger" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%" top="18vh">
            <el-form v-model="form" style="padding: 0 20px;" label-position="left" label-width="100px">
              <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="链接">
                <el-input v-model="form.url"></el-input>
              </el-form-item>
              <el-form-item label="显示顺序">
                <el-input v-model="form.showOrder">
                </el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="updateMenuBar();">确定</el-button>
            </div>
          </el-dialog>
        </div>
        <div>
          <el-dialog title="新增导航栏标签" :visible.sync="dialogNewVisible" width="30%" top="18vh">
            <el-form v-model="newForm" style="padding: 0 20px;" label-position="left" label-width="100px">
              <el-form-item label="名称">
                <el-input v-model="newForm.name"></el-input>
              </el-form-item>
              <el-form-item label="链接">
                <el-input v-model="newForm.url"></el-input>
              </el-form-item>
              <el-form-item label="显示顺序">
                <el-input v-model="newForm.showOrder">
                </el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogNewVisible = false">取消</el-button>
              <el-button type="primary" @click="addMenuBar();">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </template>
      <div style="padding: 30px 0;top: 10px;position: relative; float: right">

      </div>
    </div>

  </el-card>
</template>

<script>
export default {

  data() {
    return {
      imageUrl: '',
      dialogFormVisible: false, // 权限窗格是否显示
      dialogNewVisible: false, // 新增窗口是否显示
      role: "",                 // 用于显示的用户权限值
      form: {               // 用户权限表单，用于上传

      },
      tableData: [{
      }
      ],
      collapseBtnClass: "el-icon-s-fold",
      headerBg: "headerBg",
      newForm:{

      }
    };
  },
  inject: [
    'reload'
  ],
  methods: {

    // 打开权限编辑窗格
    openDialog(carousal) {    // 传入表格中一行用户数据
      // 对用户数据（JSON格式）进行解析，具体步骤：将读取到的表格数据转换为JSON格式（使用JSON.stringify），在解析JSON格式数据得到需要的对象(通过JSON.parse)
      this.form = JSON.parse(JSON.stringify(carousal));
      // 把读取到的用户数据内的权限赋给需要显示的权限变量
      this.role = this.form.role;
      // 将Dialog的是否显示的变量改为TRUE
      this.dialogFormVisible = true;
    },
    addMenuBar(){
       this.axios.post("http://localhost:9095/elements/insertMenuBar", this.newForm).then(() => {
        this.$message.success("新增成功")
        this.reload();
      }).catch(()=>{
        this.$message.error("参数有误")
      })
    },

    // 更新用户角色
    updateMenuBar() {
      this.axios.post("http://localhost:9095/elements/updateMenuBar", this.form).then(() => {
        this.$message.success("修改成功")
        this.reload();
      }).catch(()=>{
        this.$message.error("参数有误")
      })
    },
    deleteMenuBar(id) {
      let formData = new FormData();
      formData.append("id", id);
      this.axios.post("http://localhost:9095/elements/deleteMenuBar", formData).then(() => {
        this.$message.success("删除成功")
        this.reload();
      })
    },

    list() {
      this.axios.get('http://localhost:9095/elements/listMenuBar').then(({ data }) => {
        this.tableData = data.data;
      })
    },

  },
  mounted() {
    this.list();
  }
};
</script>

<style>
.headerBg {
  background: #eee !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
